import { TreeSelectProps } from '@/types/props';
import { ScrollView, View } from '@tarojs/components';
import React, { ReactElement, useState } from 'react';

export default ({
  titleWidth = '100px',
  bg = '#F7F7F9',
  children,
  height = '89vh',
  curID,
  mianBg = '#fff',
}: {
  children: React.ReactNode;
  bg?: string;
  titleWidth?: string;
  height?: string;
  curID?: string;
  mianBg?: string;
}) => {
  const [scrollIntoView, setScrollIntoView] = useState(curID);
  const [title, context] = React.Children.toArray(children);

  return (
    <View className="flex  " style={{ height, backgroundColor: mianBg }}>
      <ScrollView
        enhanced
        style={{ width: titleWidth, backgroundColor: bg }}
        scrollY
        showScrollbar={false}
      >
        {React.cloneElement(title as ReactElement, { setScrollIntoView })}
      </ScrollView>
      <ScrollView
        scrollIntoView={scrollIntoView}
        className="flex-1 "
        scrollY
        showScrollbar={false}
        enhanced
        scrollWithAnimation
      >
        {context}
      </ScrollView>
    </View>
  );
};
